const serverList = document.querySelector('.server-list')
for (let i = 0; i < testServer.length; i++)
{
    let item = `<div class="server-item pointer" data-serverId=${testServer[i].serverId}>
        <img src="./assets/ui/server/mole.png"/>
        <p>${testServer[i].serverName}</p>
    </div>`
    serverList.innerHTML += item
}
const serverItem = document.querySelectorAll('.server-item')
for (let i = 0; i < serverItem.length; i++)
{
    serverItem[i].addEventListener('mouseenter', function() {
        serverItem[i].style.transform = 'scale(1.1)'
        if (!audio.Button.playing()) audio.Button.play()
    })
    serverItem[i].addEventListener('mouseleave', function() {
        serverItem[i].style.transform = 'scale(1)'
    })
    serverItem[i].addEventListener('mousedown', function() {
        serverItem[i].style.transform = 'scale(1)'
    })
    serverItem[i].addEventListener('mouseup', function() {
        serverItem[i].style.transform = 'scale(1.1)'
        // 触发进入服务器事件
        userData.serverID = serverItem[i].dataset.serverId
        saveUserData()
        // 进入游戏加载地图
        serverBox.style.display = 'none'
        createLoadingLayout(() => createCurrentMap())
    })

}